<template>
  <div>
    <div class="btn-wrap">
      <el-button type="text" @click="handleAdd" v-if="!disabled">新增附件</el-button>
    </div>
    <dt-table
      :table-opts="tableOpts"
      :is-show-column="false"
      :maxHeight="300"
    >
    </dt-table>
    <dtDialog
      title="新增附件"
      :visible.sync="dialogVisible"
      @closeDialog="handleCancel"
      @comfirmBtn="onSubmit()"
    >
      <MyDtFileUpload
        v-model="fileList"
        :fileType="[]"
        :fileLimit="3"
        :fileSize="200"
        :disabled="disabled"
      />
    </dtDialog>
  </div>
</template>

<script>
import { handleFile } from '../../utils'
import MyDtFileUpload from '../dt-fileUpload'

export default {
  components: { MyDtFileUpload },
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableOpts: {
        configPagination: '1',
        rowKey: 'fileId',
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: false
        },
        tableCol: [
          {
            prop: 'name',
            label: '附件名称',
            show: true
          }
        ],
        tableData: [],
        operator: {
          width: 292,
          operatorBtn: this.disabled ? [{
            text: '下载',
            // permission: ['BRANDMAINTENANCE_UPDATE_BUTTON'],
            size: 'small',
            click: (row, col, cellValue) => { return this.download(row) }
          }] : [
            // {
            //   text: '查看',
            //   // permission: ['BRANDMAINTENANCE_UPDATE_BUTTON'],
            //   size: 'small',
            //   click: (row, col, cellValue) => { return this.detail(row) }
            // },
            {
              text: '下载',
              // permission: ['BRANDMAINTENANCE_UPDATE_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.download(row) }
            },
            {
              text: '删除',
              // permission: ['BRANDMAINTENANCE_UPDATE_BUTTON'],
              size: 'small',
              type: 'danger',
              click: (row, col, cellValue) => { return this.remove(row) }
            }
          ]
        }
      },
      fileList: [],
      fileType: ['pdf', 'doc', 'docx']
    }
  },
  methods: {
    echoData(data) {
      this.tableOpts.tableData = data.map((file) => {
        return handleFile(file)
      })
    },
    download(row) {
      window.open(row.url, '_blank')
    },
    remove(row) {
      const i = this.tableOpts.tableData.findIndex((item) => item.fileId == row.fileId)
      if (i != -1) {
        this.tableOpts.tableData.splice(i, 1)
      }
    },
    handleAdd() {
      this.dialogVisible = true
    },
    handleCancel() {
      this.fileList = []
    },
    onSubmit() {
      if (this.fileList.length > 0) {
        this.tableOpts.tableData.push(...this.fileList.map((file) => handleFile(file)))
        this.dialogVisible = false
      }
    },
    init() {
      this.form = {}
      this.tableOpts.tableData = []
      this.handleCancel()
    },
    submit() {
      return this.tableOpts.tableData
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  text-align: right;
}
</style>
